<template>
  <div>
    <el-form :inline="true">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="名称">
            <el-input v-model="queryParam.Name" @keyup.enter.native="research" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row style="text-align: center">
        <el-button type="warning" round @click="research">
          查询
        </el-button>
      </el-row>
    </el-form>

    <el-row style="margin-top: 20px">
      <el-button type="primary" @click="toAdd">
        添加
      </el-button>
    </el-row>

    <el-table
      :data="data"
      border
      fit
      highlight-current-row
      style="width: 100%; margin-top: 20px"
    >
      <el-table-column label="名称" prop="Name" />
      <el-table-column label="类型">
        <template slot-scope="scope">
          {{ scope.row.Type | dictFilter(enums.reportDbTypeEnum) }}
        </template>
      </el-table-column>
      <el-table-column label="创建时间">
        <template slot-scope="scope">
          {{ scope.row.CreatedAt | parseDate }}
        </template>
      </el-table-column>
      <el-table-column label="修改时间">
        <template slot-scope="scope">
          {{ scope.row.UpdatedAt | parseDate }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button type="text" @click="toEdit(scope.row)">
            修改
          </el-button>
          <el-button type="text" @click="toDel(scope.row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-row style="margin-top: 10px">
      <el-col :span="24">
        <el-pagination v-show="TotalRecord>0" :current-page="queryParam.CurrentPage" :page-sizes="[10,20,30, 50]" :page-size="queryParam.PageSize" :total="TotalRecord" background layout="total, sizes, prev, pager, next, jumper" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
      </el-col>
    </el-row>
  </div>
</template>

<script>
import reportDbApi from '@/api/report_db'
import reportDbTypeEnum from '@/enums/reportDb/reportDbTypeEnum'
import apolloClient from '@/utils/graphql'
import gql from 'graphql-tag'

export default {
  name: 'ReportDbList',
  data() {
    return {
      queryParam: {
        CurrentPage: 1,
        PageSize: 10,
        Name: null
      },
      data: [],
      TotalRecord: 0,
      currentRow: '',
      enums: {
        reportDbTypeEnum
      }

    }
  },
  computed: {
    // 返回当前列的数据
    currentData() {
      if (this.currentRow === '' || this.currentRow === undefined || this.currentRow == null) {
        return {}
      }
      return this.data[this.currentRow]
    }
  },
  mounted() {
    this.search()
  },
  methods: {
    toAdd() {
      this.$router.push(`/reportDb/add`)
    },
    toEdit(row) {
      console.log(row)
      this.$router.push(`/reportDb/edit/${row.ReportDbId}`)
    },
    toDel(row) {
      console.log(row)
      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        apolloClient.mutate({
          mutation: gql`mutation($unionId:String!){
                    deleteReportDb(dbID: $unionId)
                }`,
          variables: { unionId: row.ReportDbId }
        }).then(response => {
          if (response.data) {
            this.$notify.success('操作成功')
            this.research()
          } else {
            this.$notify.error(response.errors[0].message)
          }
        }).catch((err) => {
          this.$notify.error(err.message)
        })
      })
    },
    search() {
      reportDbApi.page(this.queryParam).then(response => {
        console.log(response)
        var responseData = response.data
        this.data = responseData.reportDbPage.Records
        this.TotalRecord = responseData.reportDbPage.TotalRecord
      })
    },

    // 处理每页大小改变
    handleSizeChange(val) {
      this.queryParam.PageSize = val
      this.search()
    },
    // 处理页数改变
    handleCurrentChange(val) {
      this.queryParam.CurrentPage = val
      this.search()
    },
    // 重置分页条件，发起查询
    research() {
      this.queryParam.CurrentPage = 1
      this.search()
    }

  }
}
</script>

<style>
#app {
    font-family: 'Avenir', Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
